<template>
  <div style="padding:0% 20px">
    <div style="text-align:center;padding:22%;font-size:2em;">商户登录</div>
    <CellGroup>
      <Field
        style="margin:10px 0"
        border
        clearable
        type="number"
        placeholder="请输入电话号码"
        maxlength="11"
        v-model="phone"
        :error-message="phoneErrmsg"
        @blur="phoneErrmsg=''"
      >
        <i class="fa fa-phone fa-pg" slot="right-icon"></i>
      </Field>

      <Field
        style="margin:10px 0 20px"
        border
        clearable
        type="password"
        placeholder="请输入密码"
        v-model="passwd"
        :error-message="passwdErrmsg"
        @blur="passwdErrmsg=''"
      >
        <i class="fa fa-lock fa-pg" slot="right-icon"></i>
      </Field>
      <Button
        round
        plain
        border
        type="primary"
        style="width:100%;"
        color="#DC7633"
        @click="onClick"
        >登录</Button
      >
    </CellGroup>

    <van-row type="flex" justify="space-between" class="items-express">
      <van-col span="10"
        ><router-link id="userLoginLink" :to="{ name: 'login' }"
          >用户登录</router-link
        ></van-col
      >
      <van-col style="text-align: right;" span="10"
        ><router-link id="registerLink" :to="{ name: 'shopRegister' }"
          >立即注册</router-link
        ></van-col
      >
    </van-row>
  </div>
</template>

<script>
import { Field, CellGroup, Button, Toast, Row, Col, Notify } from "vant"
import { axios, API_URL } from "../../api"

export default {
  components: {
    Field,
    CellGroup,
    Button,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data() {
    return {
      phone: "",
      passwd: "",
      //错误信息提示
      phoneErrmsg: "",
      passwdErrmsg: ""
    }
  },
  methods: {
    onClick() {
      this.passwdErrmsg = ""
      this.phoneErrmsg = ""
      if (this.phone.length != 11) {
        this.phoneErrmsg = "手机号格式错误"
        return
      }
      if (!this.passwd.length) {
        this.passwdErrmsg = "请填写密码信息"
        return
      }

      axios
        .get(API_URL + "shop/login", {
          params: {
            phone: this.phone,
            password: this.passwd
          }
        })
        .then(response => {
          Notify({ type: "success", message: "登录成功" })
          this.$store.commit("CUSTOMER_LOGOUT")
          this.$store.commit("SET_SHOP_TOKEN", response.data.token)
          this.$router.replace({ name: "shopArrange" })
        })
        .catch(err => {
          Toast.fail("账号或密码错误")
          console.error(err)
        })
    }
  }
}
</script>

<style scoped>
#registerLink {
  display: block;
  margin: 20px 5px auto auto;
  text-align: right;
  text-decoration: none;
  color: #909497;
}
#userLoginLink {
  display: block;
  margin: 20px auto 5px auto;
  text-align: left;
  text-decoration: none;
  color: #909497;
}
</style>
